<template>
  <div class="clubPage">
    <div class="searchBox bgfff">
      <el-form
        :inline="true"
        :model="form"
        ref="formRef"
        class="demo-form-inline"
        size="small"
        label-position="right"
        label-width="60px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名：" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              class="lableW"
              label="居民手机号/证件号码："
              prop="idNo"
            >
              <el-input v-model="form.idNo" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin: 20px 0">
          <el-col :span="8">
            <el-form-item label="性别：" prop="sex">
              <el-select v-model="form.sex" placeholder="请选择性别">
                <el-option label="不限" value="0"> </el-option>
                <el-option label="男" value="1"> </el-option>
                <el-option label="女" value="2"> </el-option>
              </el-select>
              <!-- <el-input v-model="form.sex" placeholder="请输入"></el-input> -->
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item class="lableW" label="房屋：" prop="house_name">
              <el-input
                v-model="form.house_name"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="display: flex; justify-content: flex-end">
            <el-form-item>
              <el-button type="primary" size="small" @click="onSubmit"
                >查询</el-button
              >
              <el-button @click="resetForm('formRef')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="tablesCard bgfff">
      <div class="tablesCardTop">
        <div>
          <!-- <el-button
            type="primary"
            size="small"
            @click="
              () => {
                scoreQRcodeShow = true;
              }
            "
            >添加居民</el-button
          > -->
          <!-- <el-button type="primary" plain size="small">导入</el-button> -->
          <el-button type="primary" size="small" @click="exportList"
            >批量导出</el-button
          >
        </div>
        <!-- <el-button type="primary" size="small" @click="addScoreShow = true"
          >赋分</el-button
        > -->
      </div>
      <el-table
        v-if="type == 1"
        :data="tableData"
        border
        size="small"
        style="width: 100%"
      >
        <!-- height="580" -->
        <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
        <el-table-column prop="_code" label="序号" align="center" width="80">
        </el-table-column>
        <el-table-column prop="userName" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" align="center">
        </el-table-column>
        <el-table-column prop="idNo" label="证件号码" align="center" />
        <el-table-column prop="" label="性别" align="center" width="100">
          <template slot-scope="scope">
            {{ scope.row.sex == 1 ? "男" : "女" }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="房屋" align="center" width="250">
          <template slot-scope="scope" v-if="scope.row.house">
            {{ scope.row.house.name }}
          </template>
        </el-table-column>
        <el-table-column
          prop="total_points"
          label="累计积分总额"
          align="center"
        />
        <el-table-column
          prop="consume_points"
          label="已兑换积分"
          align="center"
        />
        <el-table-column
          prop="surplus_points"
          label="当前余额"
          align="center"
        />
        <el-table-column
          fixed="right"
          prop=""
          label="操作"
          align="center"
          width="190"
        >
          <template slot-scope="scope">
            <div class="">
              <el-link type="warning" @click="onBtns(1, scope.row)"
                >积分二维码</el-link
              >
              <el-divider direction="vertical"></el-divider>
              <el-link type="primary" @click="onBtns(2, scope.row)"
                >赋分</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageBlock">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 50, 100, 500, 1000]"
          :total="total"
          :current-page.sync="form.page"
          :page-size="form.limit"
          @size-change="
            (e) => {
              form.limit = e;
              getList();
            }
          "
          @current-change="
            (e) => {
              form.page = e;
              getList();
            }
          "
        >
        </el-pagination>
      </div>
    </div>
    <scoreQRcode
      v-if="scoreQRcodeShow"
      @handleClose="
        (val) => {
          scoreQRcodeShow = false;
          if (val) getList();
        }
      "
      :dialogVisible="scoreQRcodeShow"
      :id="User_Id"
      :info="User_Info"
    ></scoreQRcode>
    <addScore
      v-if="addScoreShow"
      @handleClose="
        (val) => {
          addScoreShow = false;
          if (val) getList();
        }
      "
      :dialogVisible="addScoreShow"
      :id="User_Id"
    >
    </addScore>
  </div>
</template>

<script>
import { getUserScoreManage, exportUserExcel } from "@/api/score.js";
import { clubList, delClub } from "@/api/club.js";
import scoreQRcode from "./common/scoreQRcode.vue";
import addScore from "./common/addScore.vue";
export default {
  name: "",
  props: [""],

  data() {
    return {
      type: "1",
      form: {
        userName: "",
        idNo: "",
        sex: "",
        house_name: "",
        page: 1,
        limit: 10,
      },
      tableData: [{}],
      total: 0,
      checkShow: false,
      radio: 1,

      scoreQRcodeShow: false,
      addScoreShow: false,
      clubInfo: {},
      User_Id: "",
      User_Info: "",
    };
  },

  components: { scoreQRcode, addScore },

  computed: {},

  beforeMount() {},

  mounted() {
    this.getList();
  },

  methods: {
    onSubmit() {
      this.getList();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getList();
    },
    getList() {
      getUserScoreManage(this.form).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.data.list;
          this.total = res.data.data.page.count;
        }
      });
    },
    onBtns(val, info) {
      this.User_Info = info;
      // console.log(info, "$$$$$$$$$");
      if (val == 1) {
        //积分二维码
        this.scoreQRcodeShow = true;
        this.User_Id = info.id;
        // this.$refs[`popover-${info.id}`].doClose();
      } else {
        //赋分
        this.addScoreShow = true;
        this.User_Id = info.id;
      }
    },
    exportList() {
      exportUserExcel(this.form).then((res) => {
        if (res.code == 200) {
          window.open(this.$resDomain + res.data.data.path);
        }
      });
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.clubPage {
  .searchBox {
    position: relative;
    margin-bottom: 14px;
    padding: 15px 24px;
    display: flex;
    flex-direction: column;
    .tabsBox {
      margin: 10px 0 20px;
      .el-tabs {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .el-tabs__nav-wrap::after {
          background-color: rgba(0, 0, 0, 0);
        }
      }
    }
    .lableW {
      /deep/.el-form-item__label {
        width: 160px !important;
      }
    }
    /deep/.el-form-item {
      margin-bottom: 0;
      .el-input__inner {
        width: 220px;
      }
    }
    .addBtns {
      position: absolute;
      top: 15px;
      right: 24px;
    }
  }
  .tablesCard {
    .tablesCardTop {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
